<template>
	<view class="" style="width: 80%;">
	<view class="palyer" v-show="isShowPlayer">
		<!-- 控制按钮 -->
		<view class="player-left ">
			<view class="lefticon">
				<!-- 上一首 -->
				<i ref="previous" @click="previous();addC('previous','animate__fadeOut')"
					class="ri-skip-back-fill animate__animated faster"></i>
				<!-- 播放或暂停 -->
				<i ref="play" @click="playOrPause();" :class="[play_state=='play'?'ri-pause-fill':'ri-play-fill']">
				</i>
				<!-- 下一首 -->
				<i ref="next" @click="addC('next','animate__fadeOut');next()"
					class="ri-skip-forward-fill animate__animated faster"></i>
			</view>
			<!-- 歌曲图片区域-跟随播放状态旋转 -->
			<view v-if="play_list!='' && play_list[indexOf].poster" :class="[play_state=='play'?'left-Poster-animationRunning':'left-Poster-animationPaused']"  class="left-Poster" :style="`background-image: url('${play_list[indexOf].poster}');`">
			</view>
			<view v-else :class="[play_state=='play'?'left-Poster-animationRunning':'left-Poster-animationPaused']" class="left-Poster" style="background-image: url('../../static/imgs/poster-basic.png');">
			</view>
			<!-- 歌曲图片结束 -->
			<view class="left-playInfo" v-if="play_list!=''">
				<view class="" >{{play_list[indexOf].title}}</view>
				<view class="left-author fontsize-small fontcolor-secondary">{{play_list[indexOf].author||'佚名'}}</view>
			</view>
		</view>
		<view class="player-center">
			<!-- 播放进度和时间显示 -->
			{{currentTime}}
			<slider class="playSlider" activeColor="#909399" @change="sliderChange" @changing="sliderChange"
				block-size="5" :max="sliderMax" min="0" :value="sliderValue" />
			{{duration}}
		</view>
		<!-- 右侧：播放列表、循环播放等 -->
		<view class=" player-right">
			<view @click="showList=!showList" class="ri-play-list-2-line righticon">
			</view>
			<view @click="repeatMod()" class="righticon"
				:class="[repeat_state=='0'?'ri-repeat-2-fill':(repeat_state=='1'?'ri-repeat-one-fill':'ri-shuffle-line')]">
			</view>
			<i class="righticon" @click="volumeMute"
				:class="[volume_Mute ? 'ri-volume-mute-fill':'ri-volume-up-fill']"></i>
			<view class="">
				<slider class="volume-silder" activeColor="#909399" block-size='0' :value="volume" step="0.05" :min="0"
					:max=1 @change="volumeChange" @changing="volumeChange" />
			</view>
		</view>
		<!-- 播放列表 -->
		<view v-show="showList" class="music-list">
			<view class="list-box">
				<view class="list-header">
					<view class="">
						<i class="ri-play-list-line" style="padding-right: 20rpx;"></i>
						播放列表:
					</view>
					<view class="list-header-right"><i class="ri-add-circle-line"></i>全部收藏 <i
							class="ri-delete-bin-6-line" style="padding-left: 20rpx;"></i>清除</view>
				</view>
				<view>
					<scroll-view style="height: 260px;" scroll-y="true">
						<view class="music-item" @click="play(index)" :class="[index==indexOf?'cu-paly':'']"
							v-for="(item,index) in play_list" :key='item.id'>
							<view :class="[index==indexOf?'ri-play-fill':'']"
								style="width: 20rpx;padding-right: 1rem;color: #228B22;"></view>
							<view class="">{{item.title}}</view>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>
	</view>
	<view class="playerShowOrHidden" @click="playerShowOrHidden"><i :class="[isShowPlayer?'ri-lock-unlock-fill':'ri-lock-2-fill']"></i>
</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex' //引入mapState
	export default {
		name: "Player",
		data() {
			return {
				showList: false,
			}
		},
		computed: {
			...mapState({
				isShowPlayer: (state) => state.player.isShowPlayer,
				play_state: (state) => state.player.play_state,
				play_list: (state) => state.player.play_list,
				indexOf: (state) => state.player.indexOf,
				repeat_state: (state) => state.player.repeat_state,
				volume: (state) => state.player.volume,
				volume_Mute: (state) => state.player.volume_Mute,
				currentTime: (state) => state.player.currentTime,
				duration: (state) => state.player.duration,
				sliderMax: (state) => state.player.sliderMax,
				sliderValue: (state) => state.player.sliderValue,
				bufferedTime: (state) => state.player.bufferedTime,
			})
		},
		mounted() { //完成模板渲染后
			this.init() //添加播放器的监听
		},
		methods: {
			// 图标动态添加动画特效
			addC(ref, newClass) {
				this.$nextTick(() => {
					const self = this.$refs[ref]
					let oldClassName = self.className
					let newClassName = oldClassName + ' ' + newClass
					self.className = newClassName
					let t = setTimeout(
						() => {
							self.className = oldClassName;
						}, 600
					)
				})

			},
			...mapMutations('player',['init', 'playOrPause', 'volumeMute', 'sliderChange','playerShowOrHidden']), //对象展开运算符直接拿到
			// ...mapMutations(['indextest']), //mapMutations可以并列写多个
			...mapActions('player',['add', 'play', 'playOne','playList', 'next', 'previous', 'repeatMod', 'volumeChange']),
		}
	}
</script>

<style>
</style>
